<template>
  <view :style="themeColor()">
    <view v-if="Object.keys(friendsInfo).length && !loading"
      class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">
      <view
        :style="{ background: 'url(' + img('static/resource/images/app/friendpay_bg.png') + ') left bottom /100% no-repeat' }"
        class="pb-[168rpx] overflow-hidden">
        <!-- #ifdef MP-WEIXIN -->
        <view class="sticky top-0 left-0 right-0 z-100">
          <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
        </view>
        <!-- #endif -->
        <view class="mt-[20rpx] flex flex-col items-center">
          <u-avatar :default-url="img('static/resource/images/default_headimg.png')"
            :src="img(friendsInfo.member.headimg)" leftIcon="none" size="50" />
          <view class="flex items-center mt-[20rpx] text-[#fff] text-[26rpx] leading-[36rpx]">
            <text class="font-bold mr-[10rpx] max-w-[250rpx] truncate">{{ friendsInfo.member.nickname }}</text>
            <text>发起了订单帮付请求~</text>
          </view>
        </view>
      </view>
      <view class="mt-[-128rpx] card-template sidebar-margin  mb-[var(--top-m)]">
        <view class="text-[24rpx] text-center text-[#333] mb-[10rpx]">{{ t('payMoney') }}</view>
        <view class="text-center mb-[50rpx]">
          <text class="text-[32rpx] font-500 price-font text-[#FF4142]">￥</text>
          <text class="text-[56rpx] font-bold price-font text-[#FF4142]">
            {{ parseFloat(friendsInfo.money).toFixed(2).split('.')[0] }}
          </text>
          <text class="text-[32rpx] font-500 price-font text-[#FF4142]">
            .{{ parseFloat(friendsInfo.money).toFixed(2).split('.')[1] }}
          </text>
        </view>
        <view class="px-[20rpx] box-border">
          <button v-if="friendsInfo.status == 2"
            class="bg-[#FFB4B1] !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
            hover-class="none">{{ t('finish') }}
          </button>
          <button v-else-if="friendsInfo.status == -1"
            class="bg-[#FFB4B1] !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
            hover-class="none">{{ t('close') }}
          </button>
          <button v-else :loading="operateLoading"
            class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
            hover-class="none" @click="openShareFn">
            {{ friendsInfo.config.pay_type_name ? friendsInfo.config.pay_type_name : t('friendPay') }}
          </button>
        </view>
        <view
          v-if="friendsInfo.status == 2 && JSON.stringify(friendsInfo.trade_info) !== '[]' && friendsInfo.trade_info.detail_url"
          class="mt-[20rpx] flex items-baseline justify-center text-[var(--text-color-light9)]"
          @click="redirect({ url: friendsInfo.trade_info.detail_url })">
          <text class="text-[24rpx] mr-[6rpx]">查看订单</text>
          <text class="nc-iconfont nc-icon-youV6xx text-[26rpx]"></text>
        </view>
      </view>
      <view class="card-template sidebar-margin  mb-[var(--top-m)]">
        <view class="flex justify-between items-center mb-[30rpx]">
          <view class="text-[30rpx] text-[#333] font-500">{{ t('friendPayOrderInfo') }}</view>
          <view v-if="friendsInfo.config.pay_explain_switch" class="text-[#666] leading-[1]" @click="handleMessage">
            <text class="mr-[8rpx] text-[24rpx]">{{ friendsInfo.config.pay_explain_title }}</text>
            <text class="nc-iconfont nc-icon-jichuxinxiV6xx text-[26rpx]"></text>
          </view>
        </view>
        <template v-if="JSON.stringify(friendsInfo.trade_info) !== '[]'">
          <template v-if="friendsInfo.trade_info.item_list.length">
            <view class="border-0 border-solid border-b-[1rpx] border-[#f6f6f6] mb-[20rpx]">
              <view v-for="(item, index) in friendsInfo.trade_info.item_list" class="flex justify-between mb-[30rpx]">
                <view class="w-[170rpx] h-[170rpx] rounded-[var(--goods-rounded-big)] overflow-hidden flex-shrink-0">
                  <u--image :src="img(item.item_image ? item.item_image : '')" class="overflow-hidden" height="170rpx"
                    model="aspectFill" radius="var(--goods-rounded-big)" width="170rpx">
                    <template #error>
                      <image :src="img('static/resource/images/diy/shop_default.jpg')"
                        class="w-[170rpx] h-[170rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
                        mode="aspectFill" />
                    </template>
                  </u--image>
                </view>
                <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
                  <view>
                    <view class="text-[28rpx] using-hidden leading-[40rpx] text-[#333]">{{ item.item_name }}</view>
                    <view v-if="item.item_sub_name"
                      class="text-[24rpx] mt-[14rpx] text-[var(--text-color-light9)] using-hidden leading-[28rpx]">
                      {{ item.item_sub_name }}
                    </view>
                  </view>
                  <view class="flex justify-between items-baseline">
                    <view class="price-font text-[#FF4142]">
                      <text class="text-[24rpx]">￥</text>
                      <text class="text-[40rpx] font-500">{{
                        parseFloat(item.item_price).toFixed(2).split('.')[0]
                      }}
                      </text>
                      <text class="text-[24rpx] font-500">.{{
                        parseFloat(item.item_price).toFixed(2).split('.')[1]
                      }}
                      </text>
                    </view>
                    <text class="text-right text-[26rpx]">x{{ item.item_num }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="text-[26rpx] text-right">{{ friendsInfo.trade_info.item_total }}</view>
          </template>
        </template>
        <template v-else>
          <view class="text-[28rpx]  leading-[40rpx] text-[#333]">{{ friendsInfo.body }}</view>
        </template>
      </view>

      <share-poster ref="sharePosterRef" :copyUrl="copyUrl" :copyUrlParam="copyUrlParam"
        :posterId="friendsInfo.poster_id" :posterParam="posterParam" posterType="friendspay" />
      <!-- 帮付说明 -->
      <message ref="messageRef"></message>
    </view>

    <loading-page :loading="loading"></loading-page>
  </view>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from 'vue';
import { t } from '@/locale'
import { goback, img, redirect } from '@/utils/common';
import { onHide, onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { getFriendspayInfo } from '@/app/api/friendspay'
import { useShare } from '@/hooks/useShare'
import useMemberStore from '@/stores/member'
import { topTabar } from '@/utils/topTabbar';
import sharePoster from '@/components/share-poster/share-poster.vue'
import Message from '@/app/pages/friendspay/components/message.vue'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '' })
/********* 自定义头部 - end ***********/

const loading = ref<boolean>(true);
const operateLoading = ref(false)
const tradeId = ref<number>(0);
const tradeType = ref<string>('');
const friendsInfo = ref<any>({})

const firstCall = ref<boolean>(true)
const timeOut: any = ref(null)

// 分享
const { setShare } = useShare()

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

onLoad((option: any) => {
  tradeId.value = option.id || 0;
  tradeType.value = option.type || '';
})
onShow(() => {
  if (tradeId.value && tradeType.value) {
    getFriendspayInfoFn(tradeType.value, tradeId.value)
  }
})

onHide(() => {
  if (timeOut.value) {
    clearTimeout(timeOut.value);
    timeOut.value = null;
  }
})

onUnload(() => {
  if (timeOut.value) {
    clearTimeout(timeOut.value);
    timeOut.value = null;
  }
})


const getFriendspayInfoFn = (tradeType: string, tradeId: number) => {
  if (firstCall.value) { // 检查是否是第一次调用
    loading.value = true;
    firstCall.value = false; // 将标志变量设置为 false
  }
  getFriendspayInfo(tradeType, tradeId).then((res: any) => {
    friendsInfo.value = res.data
    loading.value = false
    uni.setNavigationBarTitle({
      title: friendsInfo.value.config.pay_page_name
    })
    topTabbarData = topTabarObj.setTopTabbarParam({ title: friendsInfo.value.config.pay_page_name })

    // 分享 - start
    let link = '';

    // #ifdef H5
    let pathName = location.pathname;
    let packageArr: any = ['/app/', '/addon/'];
    for (let i = 0; i < packageArr.length; i++) {
      if (pathName.indexOf(packageArr[i]) != -1) {
        pathName = pathName.substr(0, pathName.indexOf(packageArr[i]));
      }
    }

    link = location.origin + pathName + `/app/pages/friendspay/money?id=${friendsInfo.value.trade_id}&type=${friendsInfo.value.trade_type}`;
    // #endif

    let share: any = {
      desc: friendsInfo.value.config.pay_leave_message,
      path: `/app/pages/friendspay/money?id=${friendsInfo.value.trade_id}&type=${friendsInfo.value.trade_type}`,
      link
    }
    if (friendsInfo.value.member) {
      let name = friendsInfo.value.member.nickname
      name = name.length > 15 ? name = name.substring(0, 15) + '...' : name
      share.title = `${name}希望你帮他付${friendsInfo.value.money}元`
    }
    if (JSON.stringify(friendsInfo.value.trade_info) !== '[]' && friendsInfo.value.trade_info.item_list.length) {
      share.url = friendsInfo.value.trade_info.item_list[0].item_image
    }
    setShare({
      wechat: {
        ...share
      },
      weapp: {
        ...share
      }
    });
    // 分享 - end
    copyUrlFn();
    nextTick(() => {
      setTimeout(() => {
        if (sharePosterRef.value) {
          posterParam.id = friendsInfo.value.trade_id;
          posterParam.type = friendsInfo.value.trade_type;
          if (userInfo.value && userInfo.value.id) posterParam.member_id = userInfo.value.id;
          sharePosterRef.value.loadPoster();
        }
      }, 400)
    })

    if (friendsInfo.value.status != 2 && friendsInfo.value.status != 1 && friendsInfo.value.status != -1) {
      // 每隔3秒查询一次支付结果
      timeOut.value = setTimeout(() => {
        getFriendspayInfoFn(tradeType, tradeId)
      }, 1000 * 3)
    } else {
      clearTimeout(timeOut.value);
      timeOut.value = null;
    }

  }).catch((err: any) => {
    if (timeOut.value) {
      clearTimeout(timeOut.value);
      timeOut.value = null;
    }
    loading.value = false
    let parameter = {
      title: '未找到帮付订单信息',
      url: '/app/pages/index/index',
      mode: 'reLaunch'
    };
    goback(parameter)
  });
}

// 弹框
const messageRef = ref<any>(null);
const handleMessage = () => {
  messageRef.value.open(friendsInfo.value.config)
}

/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrl = ref('/app/pages/friendspay/money')
const copyUrlParam = ref('');
let posterParam: any = {};

// 分享海报链接
const copyUrlFn = () => {
  copyUrlParam.value = '?id=' + friendsInfo.value.trade_id;
  copyUrlParam.value += '&type=' + friendsInfo.value.trade_type;
}

const openShareFn = () => {
  posterParam.id = friendsInfo.value.trade_id;
  posterParam.type = friendsInfo.value.trade_type;
  if (userInfo.value && userInfo.value.id) posterParam.member_id = userInfo.value.id;
  sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/
</script>

<style lang="scss" scoped></style>
